<template>
  <div class="topic-list">
    <topic-item v-for="(topic,index) in topics" 
                :topic="topic"
                :ordinal="index+1"
                :key="topic.id">
    </topic-item>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  name: 'TopicList',
  data(){
    return {
      topics: []
    }
  },
  created(){
    // 采用 fetch 抓取数据
    let p = fetch('/topics.json');
    p.then( resp => resp.json() )
     .then( topics => this.topics = topics );
  },
  // 注册子组件
  components: {
    // 采用定义异步组件的方式来加载子组件
    'topic-item': defineAsyncComponent( () => import('@/components/TopicItem.vue') )
  }
}
</script>

<style>
.topic-list {
  margin: 20px;
  border: 1px solid #dedede;
  background: #fff;
  width: 100%;
}
</style>